import React, { useRef } from 'react'
import Test from './components/Test'

export default function App() {
  const appRef = useRef()
  return (
    <div>
      App
      <br />
      {/* 当ref对象和一个普通的jsx标签绑定的时候,可以获取这个标签的真实dom */}
      {/* <h2 ref={appRef}>测试</h2> */}
      <button
        onClick={() => {
          console.log(appRef.current)
          // appRef.current.style.backgroundColor = 'pink'
          appRef.current.setbgC('red')
        }}
      >
        按钮
      </button>
      <hr />
      {/* Test组件如果是类组件，可以写ref，并且未来可以获取类组件的实例 */}
      {/* Test组件如果是函数组件，函数组件不支持ref功能，也获取不到东西 */}
      <Test ref={appRef} xxx={123}></Test>
    </div>
  )
}
